<template>
  <div class="container">
    <div class="display">
      <div id="Catalog">
        <form :model="newOrder" @submit.prevent="confirmOrder">

          <table>
            <tr>
              <th colspan=2>Payment Details</th>
            </tr>
            <tr>
              <td>Card Type:</td>
              <td>
                <select>
                  <option v-text="newOrder.cardType"></option>
                </select>
              </td>
            </tr>
            <tr>
              <td>Card Number:</td>
              <td>
                <input type="text" id="creditCard" v-model="newOrder.creditCard" readonly="readonly">
              </td>
            </tr>
            <tr>
              <td>Expiry Date (MM/YYYY):</td>
              <td>
                <input type="text" id="expiryDate" v-model="newOrder.expiryDate" readonly="readonly">
              </td>
            </tr>
            <tr>
              <th colspan=2>Billing Address</th>
            </tr>

            <tr>
              <td>First name:</td>
              <td>
                <input type="text" id="firstName" v-model="newOrder.billToFirstName" readonly="readonly">
              </td>
            </tr>
            <tr>
              <td>Last name:</td>
              <td>
                <input type="text" id="lastName" v-model="newOrder.billToLastName" readonly="readonly">
              </td>
            </tr>
            <tr>
              <td>Address 1:</td>
              <td>
                <input type="text" id="address1" v-model="newOrder.billAddress1" readonly="readonly">
              </td>
            </tr>
            <tr>
              <td>Address 2:</td>
              <td>
                <input type="text" id="address2" v-model="newOrder.billAddress2"
                       readonly="readonly">
              </td>
            </tr>
            <tr>
              <td>City:</td>
              <td>
                <input type="text" id="city" v-model="newOrder.billCity" readonly="readonly">
              </td>
            </tr>
            <tr>
              <td>State:</td>
              <td>
                <input type="text" id="state" v-model="newOrder.billState" readonly="readonly">
              </td>
            </tr>
            <tr>
              <td>Zip:</td>
              <td>
                <input type="text" id="zip" v-model="newOrder.billZip" readonly="readonly">
              </td>
            </tr>
            <tr>
              <td>Country:</td>
              <td>
                <input type="text" id="country" v-model="newOrder.billCountry"
                       readonly="readonly">
              </td>
            </tr>

            <tr>
              <td colspan=2>
                <input type="checkbox" @click="clickEdit" id="editInformationRequired">
                Edit different shipping information...
                <button type="button" class="confirm-edit-btn" @click="confirmEdit" id="confirm-edit-btn">Confirm Edit</button>
              </td>
            </tr>

          </table>

          <input type="submit" class="ButtonNext" value="NEXT→">

        </form>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import axios from "axios";

export default {
  name: "newOrderForm",
  data() {
    return {
      newOrder: {
        orderId: 0,
        orderDate: "",
        billAddress1: "",
        billAddress2: "",
        billCity: "",
        billCountry: "",
        billState: "",
        billToFirstName: "",
        billToLastName: "",
        billZip: "",
        cardType: "",
        courier: "",
        creditCard: "",
        expiryDate: "",
        lineItems: [],
        locale: "",
        orderStatus: {},
        shipAddress1: "",
        shipAddress2: "",
        shipCity: "",
        shipCountry: "",
        shipState: "",
        shipToFirstName: "",
        shipToLastName: "",
        shipZip: "",
        status: "",
        totalPrice: 0,
      },
      username: "",
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      /*input默认为不可选中*/
      const $text_inputs = $("tr input[type='text'],select");
      $text_inputs.css('outline', 'none');
      this.newOrder = JSON.parse(localStorage.getItem('newOrder'))
      console.log(this.newOrder)
    },
    ableEditStatus() {
      const $text_inputs = $("tr input[type='text'],select"),
          $confirm_edit_btn = $('#confirm-edit-btn');
      //将表格中所有input设置成可编辑
      $('select').removeClass('select-readonly');
      $text_inputs.removeAttr('readonly');
      // input设置为可选中
      $text_inputs.css('outline', ' -webkit-focus-ring-color auto 5px');
      //出现确认编辑按钮
      $confirm_edit_btn.show();
    },
    disableEditStatus() {
      const $text_inputs = $("tr input[type='text'],select"),
          $confirm_edit_btn = $('#confirm-edit-btn');
      //将表格中所有input设置成不可编辑
      $('select').addClass('select-readonly');
      $text_inputs.removeAttr('readonly');
      /*input默认为不可选中*/
      $text_inputs.css('outline', 'none');
      //取消checkbox的选中状态
      $('#editInformationRequired').prop("checked",false)
      //隐藏确认编辑按钮
      $confirm_edit_btn.hide();
    },
    //点击编辑地址的checkbox
    clickEdit() {
      const $editInfo = $('#editInformationRequired')
      if ($editInfo.is(':checked')) {
        this.ableEditStatus();
      } else {
        // valueToInputText();
        this.disableEditStatus();
      }
    },

    //点击确认修改,传入新订单收件信息修改订单具体信息
    confirmEdit(){
      const newOrder = JSON.stringify(this.newOrder)
      console.log(newOrder)
      axios({
        url :"http://127.0.0.1:8088/order/editOrderBillAddress",
        method : 'post',
        headers: {
          'Content-Type': 'application/json'
        },
        data : newOrder
      }).then(res=>{
        console.log(res.data.data)
        const newOrderStr = JSON.stringify(res.data.data)
        localStorage.setItem('newOrder',newOrderStr)
        this.disableEditStatus()
        this.init()
      })

    },
    //确认订单
    confirmOrder() {
      const newOrder = JSON.stringify(this.newOrder)
      axios({
        url :"http://127.0.0.1:8088/order/confirmOrderForm",
        method : 'post',
        headers: {
          'Content-Type': 'application/json'
        },
        data : newOrder
      }).then(res=>{
        console.log(res)
      })


      this.$router.push('/confirmOrderForm')
    }
  }
}

</script>


<style src="../../assets/css/shop.css" scoped></style>
<style scoped>
@font-face {
  font-family: 'huayuan';
  src: url('../../assets/font/花园肉丸.ttf');
}

@font-face {
  font-family: 'cm';
  src: url('../../assets/font/Begilas.otf');
}

.display {
  height: fit-content;
  margin: 100px auto auto;
  top: 40px;
}

table {
  line-height: 30px;
  width: 470px;
}

.ButtonNext {
  border: none;
  position: relative;
  left: 420px;
  top: 7px;
  color: rgb(190, 158, 111);
}

/*下拉列表默认只读*/
.select-readonly {
  cursor: no-drop;
}

.select-readonly option {
  display: none;
}

/*确认编辑按钮*/
.confirm-edit-btn {
  border-radius: 14px;
  border: none;
  background-color: antiquewhite;
  opacity: 80%;
  font-size: 15px;
  font-family: huayuan;
  color: rgb(244, 183, 103);
  cursor: pointer;
  display: none;
  float: right;
  margin-right: 5px;
  margin-top: 4px;
}

</style>